/*
 * @Author: yehongbo 1394168736@qq.com
 * @Date: 2024-06-11 19:20:55
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-06-19 19:40:44
 * @FilePath: \myWorkspace\react-basic\src\components\zuxian\child2.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

// 类组件
import { Component } from 'react'
import { Consumer } from '@/provider.js'

export default class child2 extends Component {
    // 这种方法只能实现从上往下传值，无法实现后代向祖先传值，同 vue 一样
    constructor() {
        super()
        console.log('组件开始加载');
    }

    componentDidMount() {
        console.log('组件挂载完成');
    }
    render() {
        console.log('组件开始被编译');
        return (
            <Consumer>
                {
                    value => (
                        <div>
                            <h4>子组件B--{value}</h4>
                        </div>
                    )
                }
            </Consumer>
        )
    }
}

// 总结
// 挂载时

// constructor：类中的构造器充当了生命周期，此时拿到数据源
// render：相当于vue中的 beforeMount，还拿不到 dom
// componentDidMount：挂载完成，可以拿到 dom
// 更新时

// render：父组件传参 New props，修改数据源 setState，强制更新 forceUpdated 都会重新渲染 render
// componentDidUpdate：更新完成
// 卸载时

// componentWillUnmount：组件即将卸载时执行